src/components/BarGraph.vue：

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";

export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;

    let chart = null
    let setOption = {  
          title: {  
            text: getNowDate() + ' 总用电量/小时',  
            left: 'center',  
          },  
          xAxis: {  
            type: 'category',  
            data:[]
          },  
          tooltip: {  
            trigger: 'axis'  
          },  
          yAxis: {  
            type: 'value'  
          },  
          // dataZoom: [
          //   {
          //     type: 'inside',
          //     start: 0,
          //     end: 20
          //   },
          //   {
          //     start: 0,
          //     end: 20
          //   }
          // ],
          series: [  
            {  
              data: [],  
              type: 'line',  
              smooth: true,  
              itemStyle: {  
                normal: {  
                  label: {  
                    show: true,  
                    position: 'top',  
                    formatter: '{c}'  
                  }  
                }  
              }  
            }  
          ]  
    };

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      myEcharts.dispose;
    });

    function setFirstData(arr,arr1){
      setOption.xAxis.data = arr
      setOption.series[0].data = arr1
      console.log(setOption.series[0])
      chart.setOption(setOption);
    }

    function getNowDate (){
      var date = new Date();
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      return year + "年" + month + "月" + day+'日'
    }
    
    function initChart() {
      chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption(setOption);
      window.onresize = function () {
        chart.resize();
      };
    }

    return {
      initChart,setFirstData
    };
  }
};
</script>

